<!--
* @description 巡检任务详情
* @author zywu
* @date 2021/03/12 16:31:44
!-->
<template>
  <div class="inspectDetail">
    <!-- 顶部  -->
    <van-sticky>
      <van-nav-bar title left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div style="padding:10px 14px 70px;">
      <div class="inspectDetail_top">
        <div class="inspectDetail_top_top">
          <div class="img_box">
            <img src="../../assets/img/inspect/magnifier.png" alt class="magnifier" />
          </div>
          <div class="inspectDetail_top_right">
            <span class="inspectDetail_labelName">{{ detailData.labelName }}</span>
            <span class="inspectDetail_taskName">{{ detailData.name }}</span>
            <span>责任主体：{{ detailData.lliablepersonsName }}</span>
            <span class="inspectDetail_time">时限：{{ detailData.startTime }} - {{ detailData.endTime }}</span>
          </div>
        </div>
        <div class="inspectDetail_top_bottom">
          <div class="inspectDetail_top_bottom_box">
            <span>{{ detailData.examined }}</span>
            <span>已巡检点位</span>
          </div>
          <div class="inspectDetail_top_bottom_mid"></div>
          <div class="inspectDetail_top_bottom_box">
            <span>{{ detailData.pointId }}</span>
            <span>未巡检点位</span>
          </div>
        </div>
      </div>
      <!-- 巡检点位明细 -->
      <div class="definite_detailed">
        <span style="color: #333333;">巡检点位明细</span>
        <van-checkbox icon-size="18px" checked-color="#2471CA" v-model="checked">自动隐藏已巡检点位</van-checkbox>
      </div>
      <div v-for="(item, index) in pointList" :key="index" class="data_detail d-flex ai-center jc-between"
        @click="goDetail(item)">
        <div class="data_detail__left">
          <span class="data_detail__left__name">{{ item.name }}</span>
          <span class="data_detail__left__local">{{ item.location }}{{ item.address ? '>' + item.address : '' }}</span>
          <div>
            <i class="iconfont icon-dingweiweizhi" style="color: #2471CA;font-size: 14px;"></i>
            <span class="data_detail__left__unit">{{ detailData.orgName }}</span>
          </div>
        </div>
        <span class="data_detail__result"
          :style="item.result === null ? 'color: #999999;' : item.result == 1 ? 'color: #69BA71;' : 'color: #F02020;'">{{
            item.result
            === null ? '未巡检' : item.result == 1 ? '已巡检' : '检出不合格' }}</span>
      </div>
      <div class="pager">
        <van-pagination v-model="pageIndex" :total-items="total" :items-per-page="pageSize" :force-ellipses="true"
          @change="changePage" />
      </div>
      <div
        style="display: flex;align-items: center;width: 100%;justify-content: center;flex-direction: column;position: relative;"
        v-if="total == 0">
        <img src="../../assets/img/inspect/point_null.png" alt style="width:70%;" />
        <span style="font-size:14px;color:#999;position: absolute;bottom:12px;">暂无更多哦～</span>
      </div>
      <div v-if="!readonly" class="scan_code" @click="scan_code">
        <i class="iconfont icon-saoyisao"></i>
      </div>
    </div>
    <van-overlay :show="showOverlay" @click="showOverlay = false">
      <div class="wrapper">
        <div class="wrapper-box">
          <img src="../../assets/img/inspect/exclamation_point.png" alt />
          <p>{{ dataInfo }}</p>
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="showInspect" @click="showInspect = false">
      <div class="wrapper">
        <div class="wrapper-box">
          <img src="../../assets/img/inspect/point_revise.png" alt />
          <p>
            点击此处跳转到
            <span @click="inspectToPoint">【巡检内容】</span>
          </p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getExamineTaskDeatil, getPointNowStatus } from '@/api/inspect'
import { mapState } from 'vuex'
let allPointList = []
export default {
  name: 'InspectDetail',
  data() {
    return {
      taskId: '',
      checked: false,
      detailData: {},
      scanResult: '',
      showHidden: true,
      showOverlay: false,
      showInspect: false,
      codeGet: '',
      dataInfo: '',
      readonly: false,
      pageIndex: 1,
      pageSize: 50,
      pointList: [],
      total: 0
    }
  },

  components: {},

  computed: {
    ...mapState(['userInfo', 'appKeyObj', 'curInspectTaskId', 'isOffline']),
  },

  watch: {
    checked() {
      this.changePage(1)
    },
    curInspectTaskId(val) {
      if (val) {
        this.taskId = val
        this.readonly = true
        this.pageIndex = 1
        this.getListDetail()
      }
    }
  },

  created() {
    // 扫描二维码或者nfc原生返回过来的数据
    window.getQode = (code) => {
      this.codeGet = code
      getPointNowStatus({
        taskId: this.taskId.toString(),
        account: this.userInfo.accountName,
        pointCode: this.codeGet,
      }).then((res) => {
        if (res.data.status == 200) {
          this.inspectToPoint()
        } else {
          this.dataInfo = res.data.info
          this.showOverlay = true
        }
      })
    }
  },

  activated() {
    this.loaded = false
    let { item, readonly } = this.$route.query
    let { refresh } = this.$route.params
    this.readonly = readonly && readonly != '0' ? true : false
    this.taskId = item
    if (refresh) {
      this.pageIndex = 1
      this.pointList = []
      this.total = 0
      this.keepScroll = 0
      this.getListDetail()
    } else {
      if (this.keepScroll) {
        this.$nextTick(() => {
          document.body.scrollTop = this.keepScroll;
          document.documentElement.scrollTop = this.keepScroll;
        })
      }
      this.updatePointResult()
    }
  },

  mounted() {
    window.native = this.$native
  },

  methods: {
    updatePointResult() {
      let point = window.inspect_point_result
      if (point) {
        this.$set(this.detailData, 'examined', this.detailData.examined + 1)
        this.$set(this.detailData, 'pointId', this.detailData.pointId - 1)
        let one = allPointList.find(n => {
          return n.pointCode == point.pointCode
        })
        if (one)
          one.result = point.result
        let two = this.pointList.find(n => {
          return n.pointCode == point.pointCode
        })
        if (two) {
          this.$set(two, 'result', point.result)
        }
        window.inspect_point_result = ''
      }
    },
    saveScroll() {
      const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
      this.keepScroll = scrollTop;
    },
    // 扫描二维码  跳转到巡检点位进行编辑
    inspectToPoint() {
      this.saveScroll()
      this.$router.push({
        name: 'InspectPoint',
        query: {
          pointCode: this.codeGet,
          compile: true,
          taskId: this.detailData.id || 1,
          getPointresult: false,
        },
      })
    },
    // 跳转到巡检点位获取详情
    getListDetail() {
      getExamineTaskDeatil({
        taskId: this.taskId.toString()
      }).then((res) => {
        this.pageIndex = 1
        res.data.pointId =
          res.data.pointIds.split(',').length - res.data.examined
        allPointList = res.data.pointList
        this.detailData = {
          ...res.data,
          pointList: []
        }
        this.total = allPointList.length
        this.changePage(1)
        // console.log(JSON.stringify(allPointList.slice(500, 1000)))
      })
    },
    changePage(val) {
      this.pageIndex = val
      let list = this.checked ? allPointList.filter(n => {
        return !n.result
      }) : allPointList
      this.pointList = list.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize)
      this.$nextTick(() => {
        window.scrollTo(0, 0)
      })
    },
    // 进入详情页
    goDetail(item) {
      if (item.result) {
        this.saveScroll()
        this.$router.push({
          name: 'InspectPoint',
          query: {
            pointCode: item.pointCode,
            taskId: this.detailData.id,
            compile: false,
            pointId: item.id, //点位id
            getPointresult: item.result == 2 ? true : false //是否合格
          },
        })
      }
    },
    // 扫描二维码
    scan_code() {
      // this.codeGet = 'b675526b34fe4c8aab4ff46ef5a83b4b'
      // this.inspectToPoint()
      this.$native.scanQrCode()
      // this.scanResult = this.$native.scanResult()
    },
    onClickLeft() {
      if (this.$route.query.tabId === '3') {
        window.top.app.methods.backToTab()
      } else {
        this.$router.push({ name: 'InspectMain' })
      }
    },
    getscanQrCodeDetail() { },
  },
}
</script>
<style lang='scss'>
.inspectDetail {

  .pager {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 10px;
  }

  // padding: 20px;
  .inspectDetail_top {
    width: 100%;
    background: #2471ca;
    border-radius: 5px;
    padding-bottom: 20px;

    .inspectDetail_top_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding-top: 20px;

      .magnifier {
        width: 90px;
        margin-left: 20px;
      }

      .inspectDetail_top_right {
        width: 60%;
        margin-right: 6px;

        .inspectDetail_labelName {
          background: rgba($color: #4dadff, $alpha: 0.3);
          padding: 4px 16px;
          border-radius: 20px;
        }

        .inspectDetail_taskName {
          font-weight: bold;
          margin: 6px 0;
          font-size: 16px;
        }

        .inspectDetail_time {
          margin-top: 6px;
          font-size: 14px;
        }

        span {
          display: inline-block;
          font-size: 14px;
        }
      }
    }

    .inspectDetail_top_bottom {
      width: 90%;
      height: 70px;
      background: #fff;
      margin-top: 20px;
      margin-left: 5%;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .inspectDetail_top_bottom_box {
        display: inline-flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;

        span:nth-child(1) {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        span {
          color: #2471ca;
          font-size: 14px;
        }
      }

      .inspectDetail_top_bottom_mid {
        border-left: 1px dashed #1765e7;
        height: 36px;
      }
    }
  }

  .definite_detailed {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;

    span {
      color: #333333;
    }

    div {
      span {
        color: #999999;
        font-size: 14px;
      }
    }
  }

  .data_detail {
    padding: 12px 16px;
    box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);
    border-radius: 5px;
    width: calc(100% - 32px);
    font-size: 14px;
    margin-top: 10px;

    &__left {
      display: flex;
      flex-direction: column;

      &__name {
        // font-size: 17px;
        color: #333333;
        // font-weight: bold;
      }

      &__local {
        margin: 10px 0;
        color: #999;
      }

      &__unit {
        color: #999;
        margin-left: 5px;
      }
    }

    &__result {
      margin-left: 10px;
      min-width: fit-content;
    }
  }

  .scan_code {
    position: fixed;
    right: 30px;
    bottom: 10%;
    background: #2979d1;
    height: 38px;
    width: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0px 2px 10px 2px rgba(181, 200, 206, 0.5);

    .iconfont {
      font-size: 24px;
      color: #fff;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper-box {
      width: 70%;
      background: #fff;
      padding: 20px 10px;
      border-radius: 5px;
      display: inline-flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      flex-direction: column;

      p {
        span {
          color: #2471ca;
        }
      }
    }
  }
}
</style>